<template>
  <div class="overflow-auto">
    <div class="flex justify-between">
      <div>
        <el-select
          v-model="form.cost"
          placeholder="是否排除运费为0"
          class="w-[150px]"
          clearable
        >
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
        <el-button type="primary" class="ml-[16px]" @click="search"
          >查询</el-button
        >
      </div>
      <div class="flex">
        <div
          class="text-[14px] text-[var(--base-text-color)] leading-[30px] mr-[43px] mb-[8px]"
          v-for="item in headDesc"
          :key="item.label"
        >
          <span>{{ item.label }}：</span>
          <span>{{ info[item.field] || "-" }}</span>
        </div>
      </div>
    </div>
    <vxe-grid ref="tableRef" v-bind="tableOptions" :pager-config="pagerConfig">
      <template #systemFreight="{ row }">
        <el-link type="primary" @click="handlesystemFreight(row)"
          >{{ row?.freight || 0 }} {{ row?.currency || "-" }}</el-link
        >
      </template>
      <template #logisticsFreight="{ row }">
        <el-link type="primary" @click="handlelogisticsFreight(row)">
          <template v-if="row?.api_calc">
            {{
              `${
                row.api_calc?.freight !== undefined ? row.api_calc.freight : "-"
              } (${
                row.api_calc?.currency !== undefined
                  ? row.api_calc.currency
                  : "-"
              })`
            }}
          </template>
          <template v-else> --- </template>
        </el-link>
      </template>
      <template #sysCalc="{ row }">
        <el-link type="primary" @click="handleSysCalc(row)"> 详情 </el-link>
      </template>
    </vxe-grid>
    <freightDialog
      v-model="freightVisible"
      :data="freightData"
      :type="freightType"
      @close="freightData = {}"
    />
    <calcDialog
      v-model="calcVisible"
      :data="calctData"
      :type="freightType"
      @close="calcData = {}"
    />
  </div>
</template>

<script setup lang="jsx">
import freightDialog from "../freightDialog/index.vue";
import calcDialog from "../calcDialog/index.vue";
const props = defineProps({
  data: { type: Array, default: () => [] },
});

const pagerConfig = ref({
  currentPage: 1, // 当前页
  pageSize: 10000, // 每页条数
  total: 0, // 数据总数
  layouts: ["PrevPage", "NextPage", "Sizes", "Total"], // 分页布局
  pageSizes: [10000], // 每页条数选项
});

const tableRef = ref();
const filteredData = ref([]);
watch(
  () => props.data,
  (val) => {
    filteredData.value = val.filter((item) => true);
    setTimeout(() => {
      form.value.cost = 1;
      search();
    }, 1000);
  }
);
const form = ref({});
const query = () => {
  tableRef?.value.commitProxy("query");
};
const reload = () => {
  tableRef?.value.commitProxy("reload");
};
const search = async () => {
  let data = props.data;
  filteredData.value = data.filter((item) => {
    if (form.value.cost === 1) {
      return item?.freight !== 0;
    } else if (form.value.cost === 0) {
      return true;
    } else {
      return true;
    }
  });
  reload();
};
const findPageList = (val) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const currList = filteredData.value;
      resolve({
        data: currList.slice(
          (val.currentPage - 1) * val.pageSize,
          val.currentPage * val.pageSize
        ),
        total: currList.length,
      });
    }, 300);
  });
};
const headDesc = [
  // { label: "发货仓", field: "shipping_address" },
  { label: "目的国家", field: "arrival_address" },
  { label: "重量(g)", field: "weight" },
  // { label: "产品属性", field: "goods_attrs" },
];

const info = computed(() => {
  const { data = [] } = props;
  return data.length ? data[0] : {};
});
const freightVisible = ref(false);
const freightData = ref({});
const freightType = ref();
const handlesystemFreight = (row) => {
  freightVisible.value = true;
  freightType.value = "system";
  freightData.value = row;
};
const handlelogisticsFreight = (row) => {
  freightVisible.value = true;
  freightType.value = "logistics";
  freightData.value = row;
};
const calcVisible = ref(false);
const calctData = ref({});
const handleSysCalc = (row) => {
  calcVisible.value = true;
  let data = {
    formula1: row?.extend?.freight_info?.formula,
    math1: row?.extend?.freight_info?.math,
    formula2: row?.extend?.total_freight?.formula,
    math2: row?.extend?.total_freight?.math,
    currency: row?.currency,
    exchange_rate: row?.exchange_rate,
    freight: row?.freight_cny,
  };
  calctData.value = data;
};
const tableOptions = reactive({
  pagerConfig: { pageSize: 10000, total: 0 },
  round: true,
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  scrollY: {
    enabled: true,
    gt: 0,
  },
  height: "100%",
  columns: [
    { fixed: "left", width: 50, title: "编号", type: "seq" },
    {
      fixed: "left",
      title: "渠道名称",
      width: 160,
      field: "channel_name",
    },
    {
      title: "系统运费金额(原币)",
      width: 165,
      field: "freight_cny",
      slots: { default: "systemFreight" },
      sortable: true,
    },
    {
      title: "物流商运费金额",
      width: 140,
      field: "channel_name",
      slots: { default: "logisticsFreight" },
    },
    {
      title: "发货仓",
      width: 100,
      field: "warehouse_name",
    },
    {
      title: "区域",
      width: 100,
      field: "regions",
    },
    // { title: "运费金额(CNY)", width: 140, field: "freight_cny",sortable: true },
    { title: "时效(天)", width: 100, field: "time_limit", sortable: true },
    {
      title: "体积(CBM)",
      width: 105,
      field: "volume",
    },
    {
      title: "体积重(KG)",
      width: 105,
      field: "volume_weight",
      formatter: ["formatWeight"],
    },
    {
      title: "包裹重(KG)",
      width: 120,
      field: "weight",
      formatter: ["formatWeight"],
    },
    {
      title: "计费重(KG)",
      width: 120,
      field: "real_weight",
      formatter: ["formatWeight"],
    },
    { title: "抛重值", width: 120, field: "count_reason" },
    { title: "抛比", width: 120, field: "count_reason_ratio" },
    { title: "偏远地址费(CNY)", width: 140, field: "far_fee" },
    { title: "关税(CNY)", width: 120, field: "todo" },
    {
      title: "公式",
      width: 120,
      slots: { default: "sysCalc" },
      fixed: "right",
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return findPageList({ ...form, ...page }).then((res) => {
          console.log(res);
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
</script>
<style lang="scss" scoped>
:deep(.vxe-pager) {
  height: 40px;
}
</style>
